<template>
  <div id="container">
    <div class="imgBox">
      <div class="imgBox_inner">
        <h2 class="inner_tit">万千歌手 尽在眼前</h2>
        <div class="inner_desc">登录查看你的关注歌手</div>
        <span class="inner_btn">立即登录</span>
      </div>
    </div>
    <div class="main">
      <div class="singer_tag">
        <div class="tag_list">
          <span class="tag_tit">华语</span>
          <div class="item_box" @click="changeSingers">
            <span class="tag_item" data-type="-1" data-area="7">全部</span>
            <span class="tag_item" data-type="1" data-area="7">华语男歌手</span>
            <span class="tag_item" data-type="2" data-area="7">华语女歌手</span>
            <span class="tag_item" data-type="3" data-area="7">华语组合/乐队</span>
          </div>
        </div>

        <div class="tag_list">
          <span class="tag_tit">欧美</span>
          <div class="item_box" @click="changeSingers">
            <span class="tag_item" data-type="-1" data-area="96">全部</span>
            <span class="tag_item" data-type="1" data-area="96">欧美男歌手</span>
            <span class="tag_item" data-type="2" data-area="96">欧美女歌手</span>
            <span class="tag_item" data-type="3" data-area="96">欧美组合/乐队</span>
          </div>
        </div>

        <div class="tag_list">
          <span class="tag_tit">日本</span>
          <div class="item_box" @click="changeSingers">
            <span class="tag_item" data-type="-1" data-area="8">全部</span>
            <span class="tag_item" data-type="1" data-area="8">日本男歌手</span>
            <span class="tag_item" data-type="2" data-area="8">日本女歌手</span>
            <span class="tag_item" data-type="3" data-area="8">日本组合/乐队</span>
          </div>
        </div>

        <div class="tag_list">
          <span class="tag_tit">韩国</span>
          <div class="item_box" @click="changeSingers">
            <span class="tag_item" data-type="-1" data-area="16">全部</span>
            <span class="tag_item" data-type="1" data-area="16">韩国男歌手</span>
            <span class="tag_item" data-type="2" data-area="16">韩国女歌手</span>
            <span class="tag_item" data-type="3" data-area="16">韩国组合/乐队</span>
          </div>
        </div>

        <div class="tag_list">
          <span class="tag_tit">其他</span>
          <div class="item_box" @click="changeSingers">
            <span class="tag_item" data-type="-1" data-area="0">全部</span>
            <span class="tag_item" data-type="1" data-area="0">其他男歌手</span>
            <span class="tag_item" data-type="2" data-area="0">其他女歌手</span>
            <span class="tag_item" data-type="3" data-area="0">其他组合/乐队</span>
          </div>
        </div>
      </div>
      <div class="singer_list">
        <ul class="singer_list_1" @click="toSinger">
          <li v-for="item in singerList1" :key="item.id" :data-id="item.id">
            <div class="singer_pic_box" :data-id="item.id">
              <img class="singer_pic" :src="item.picUrl" :data-id="item.id" />
              <h3 class="singer_name" :data-id="item.id">{{ item.name }}</h3>
            </div>
          </li>
        </ul>
        <ul class="singer_list_2" @click="toSinger">
          <li v-for="item in singerList2" :key="item.id">
            <div class="singer_txt_box">
              <h3 class="singer_name" :data-id="item.id">{{ item.name }}</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reqSingerList } from "../../api/singer";
export default {
  name: "SingerList",
  data() {
    return {
      singerList1: [], //展示头像的歌手列表10个item
      singerList2: [], //只展示name的歌手列表
      currentTarget: null,
    };
  },
  methods: {
    //获取
    async getSingerList(options = {}) {
      const singerList = await reqSingerList(options);
      const singerList1 = singerList.data.artists.slice(0, 10);
      const singerList2 = singerList.data.artists.slice(10);
      this.singerList1 = singerList1;
      this.singerList2 = singerList2;
    },
    //分类搜索歌手
    changeSingers(event) {
      if (this.currentTarget) this.currentTarget.classList.remove("active");
      event.target.classList.add("active");
      this.currentTarget = event.target;
      const { area, type } = event.target.dataset;
      this.getSingerList({ type, area });
    },
    //给singer组件传singerId并切换到singer组件
    toSinger(event) {
      const singerId = event.target.dataset.id;
      this.$router.push({
        name: "Singer",
        query: {
          singerId,
        },
      });
    },
  },
  mounted() {
    //请求歌手列表
    this.getSingerList();
  },
};
</script>

<style>
/* imgBox开始 */
#container .imgBox {
  height: 376px;
  width: 100%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  background-image: url("../../../public/images/bg_singer.0ba4a7af.jpg");
  position: relative;
}
.imgBox .imgBox_inner {
  font-family: Arial, "Microsoft YaHei";
  color: #eeeeee;
  text-align: center;
  height: 174px;
  width: 1200px;
  max-width: 1200px;
  /* border: 1px solid green; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.imgBox .imgBox_inner .inner_tit {
  font-size: 50px;
  height: 60px;
  width: 494px;
  margin: 0 auto;
}
.imgBox .imgBox_inner .inner_desc {
  font-size: 22px;
  height: 26px;
  width: 260px;
  margin: 20px 470px 0 470px;
}
.imgBox .imgBox_inner .inner_btn {
  display: block;
  font-size: 18px;
  text-align: center;
  height: 46px;
  width: 172px;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 48px;
  word-spacing: 0;
  border: rgb(255, 255, 255, 0.3) solid 1px;
  /* border-radius: 2px; */
  cursor: pointer;
}
.inner_btn:hover {
  color: rgb(255, 255, 255);
  border-color: #fff;
  outline: rgb(255, 255, 255, 0.9) solid 1px;
}
/* imgBox结束 */
.main {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
}
/* singer_tag开始 */
.singer_tag {
  background-color: #fbfbfd;
  height: 212px;
  width: 1160px;
  margin: 30px auto 20px auto;
  padding: 34px 0 17px 40px;
  /* border: 1px solid red; */
}
.singer_tag .tag_list {
  text-align: left;
  height: 40px;
  /* border: 1px solid blue; */
}
.tag_list .item_box {
  display: inline-block;
}
.tag_list .tag_item {
  height: 26px;
  line-height: 27px;
  font-size: 14px;
  margin: 0 12px 14px 0;
  padding: 0 8px 0 8px;
  cursor: pointer;
}
.tag_list .tag_tit {
  font-weight: bold;
  height: 26px;
  line-height: 27px;
  font-size: 14px;
  margin: 0 12px 14px 0;
  padding: 0 8px 0 8px;
}
.tag_list .tag_item.active {
  background-color: #31c27c;
  color: #fff;
}
/* singer_tag结束 */
/* singer_list 开始 */

.singer_list_1 li,
.singer_list_2 li {
  float: left;
  width: 230px;
  margin: 20px 10px 0 0;
}
.singer_list .singer_pic_box {
  height: 195px;
  min-height: 195px;
  width: 224px;
  text-align: center;
  margin: 0 20px 0 0;
  padding: 25px 0 25px 0;
  background-color: #fbfbfd;
}
.singer_list .singer_pic_box .singer_pic {
  display: block;
  height: 140px;
  width: 140px;
  border-radius: 50%;
  margin: 0 auto;
  cursor: pointer;
}
.singer_list .singer_pic_box .singer_name {
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  margin-top: 18px;
  text-align: center;
  cursor: pointer;
}
.singer_list_2 li {
  height: 36px;
}
.singer_list_2 .singer_txt_box .singer_name {
  font-weight: normal;
  text-align: left;
  cursor: pointer;
}
/* singer_list 结束 */
</style>
